<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/three.js"></script>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="webgl-output"></div>

    <script>
      function init() {
        // 创建场景
        const scene = new THREE.Scene();
        // 创建摄像机
        const camera = new THREE.PerspectiveCamera(
          45,
          window.innerWidth / window.innerHeight,
          0.1,
          2000
        );
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        // 设置初始颜色
        renderer.setClearColor(new THREE.Color("#fff"));
        // 设置输出canvas画布的大小
        renderer.setSize(window.innerWidth, window.innerHeight);
        // 显示三维坐标系
        const axis = new THREE.AxisHelper(20);
        // 添加坐标系到场景中
        scene.add(axis);
        // 设置几何物体及材质
        const planeGeometry = new THREE.PlaneGeometry(60, 20);
        const planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc });
        const plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 15;
        plane.position.y = 0;
        plane.position.z = 0;
        // 将物体添加到场景
        scene.add(plane);
        // 定位相机，指向场景中心
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);
        // 将渲染器输出添加到html
        document
          .getElementById("webgl-output")
          .appendChild(renderer.domElement);
        renderer.render(scene, camera);
      }
      window.onload = init;
    </script>
  </body>
</html>
